<template>
  <div class="total-order">
    <CommonCard title="累计订单额" :value="reportData.orderToday">
      <template #default>
        <v-chart :option="option" />
      </template>
      <template #footer>
        <span>昨日销售额</span>
        <span class="css-1">￥{{ reportData.orderLastDay }}</span>
      </template>
    </CommonCard>
  </div>
</template>

<script>
import CommonCard from "./CommonCard.vue";

export default {
  props: ["reportData"],
  data() {
    return {
      option: {},
    };
  },
  methods: {
    //这个方法是用来给option赋值的
    renderChart(data) {
      this.option = {
        xAxis: {
          type: "category",
          show: false,
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
        },
        series: {
          type: "line",
          data,
          areaStyle: {
            color: "purple",
          },
          itemStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          smooth: true,
        },
      };
    },
  },
  components: {
    CommonCard,
  },
  mounted() {
    // this.renderChart(data);
  },
  //当传入组件的reportData有数据的时候 用数据中的orderTrend这个数据来渲染图表
  // 数据(reportData)变化=> 执行副作用函数(render函数 视图变化 watch函数 computed函数 watchEffect函数)
  watch: {
    reportData(newValue) {
      this.renderChart(newValue.orderTrend);
    },
  },
};
</script>

<style lang="scss" scoped></style>
